@import './common-functions.less';

.aj-btn-base() {
    min-height: 30px;
    font-size: .8rem;
    //line-height: 100%;
    padding: .4em 2.3em;
    margin: 10px auto;
    color: #333;
    letter-spacing: .3em;
    border-radius: 4px;
    border: 1px solid #ccc;
    border-bottom-color: #B4B4B4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    background-color: lightgray;
    background-repeat: repeat-x;
    transition: background-image 0.5s linear 1s;
    cursor: pointer;
    outline: 0;
    .gradient (top, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 60%, rgba(225, 223, 226, 1) 100%);

    img {
        vertical-align: middle;
    }

    &:hover {
        color: black;
        border-color: lighten(black, 65%);
    }

    &:active {
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
        border-color: lighten(black, 55%);
    }

    &:focus {
        border-color: lighten(black, 60%);
    }

    &:hover {
        background-position: 0px -10px;
    }
}

.aj-btnsHolder-base() {
    text-align: center;
    padding: 2% 0;

    button {
        .aj-btn-base();
        margin-right: 3% !important;
    }
}

.aj-input-base() {
    min-height: 29px;
    font-size: .9rem;
    border: 1px solid #abadb3;
    border-radius: 3px;
    box-shadow: 1px 2px 3px #e5e5e5 inset;
    box-sizing: border-box;
    background-color: white;
    transition: border-color ease-in-out 200ms;
    outline: 0;
    padding: 4px;
    vertical-align: middle;
    color: #333;
    letter-spacing: 1px;

    &:hover,
    &:focus {
        border-color: lighten(black, 45);
    }
}

.aj-select-base() {
    padding: 1px 4px;
    -moz-appearance: none;
    -webkit-appearance: none;
    min-height: 29px;
    font-size: .9rem;
    border: 1px solid #abadb3;
    border-radius: 3px;
    box-shadow: 1px 2px 3px #e5e5e5 inset;
    box-sizing: border-box;
    background-color: white;
    transition: border-color ease-in-out 200ms;
    outline: 0;

    &:hover,
    &:focus {
        border-color: lighten(black, 45);
    }

    background: url("") no-repeat right;
}

.aj-form {
    input[type=text], input[type=password] {
        .aj-input-base();
    }

    button {
        .aj-btn-base();
    }

    >div {
        margin-bottom: 20px;
        text-align: left;
    }

    .form-group {
        margin-bottom: 20px;
        position: relative;
    }

    // 表单验证
    .tips,
    .state {
        display: none;
        margin-left: 10px;
        border: 1px solid gray;
        padding: 3px 3px;
        position: relative;
    }

    .tips strong,
    .state strong {
        border-style: solid;
        height: 0;
        line-height: 0;
        width: 0;
        font-size: 0;
        position: absolute;
        border-width: 5px;
    }

    .tips strong.arrow_1,
    .state strong.arrow_1 {
        left: -11px;
        top: 7px;
        border-color: white gray white white;
    }

    .tips strong.arrow_2,
    .state strong.arrow_2 {
        left: -9px;
        top: 7px;
        border-color: transparent white transparent transparent;
    }

    .state {
        color: red;
        font-weight: bold;
    }

    .errHighlight {
        border-color: red ! important;
        color: red;
    }

    .error {
        border-color: red !important;
    }

    .error-message {
        color: red;
        padding-left: 1%;
        position: absolute;
        right: 0px;
        top: 0;
    }
}